<template>
  <div  class="white-box">
    <el-tabs v-model="tabsActive" type="card" >
      <template v-for="(item, index) in tabs">
        <el-tab-pane :label="item.label" :name="item.value"></el-tab-pane>
      </template>
    </el-tabs>
    <div v-loading.fullscreen="loading">
      <el-form ref="formRef" :model="formData" :rules="formRule" label-width="120px" style="max-width: 1000px;margin-top: 20px">
        <el-form-item label="标题" prop="title">
          <el-input v-model.trim="formData.title" clearable placeholder="请输入标题" />
        </el-form-item>
        <el-form-item label="内容" prop="content">
          <!--        v-loading="videoLoading" element-loading-text="上传视频中，请耐心等待..."-->
          <div class="editor-box">
            <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="editorToolbarConfig" mode="default" />
            <Editor
                style="height: 440px; overflow-y: hidden"
                v-model="formData.content"
                :defaultConfig="editorConfig"
                mode="default"
                @onCreated="handleEditorCreated"
            />
          </div>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="formData.status">
            <el-radio :value="0">正常</el-radio>
            <el-radio :value="1">停用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
    </div>
    <div class="foot-btn flexs-center" style="margin-top: 30px">
      <el-button type="primary" size="large" @click="submit" :loading="btnLoading"> 保存 </el-button>
    </div>
  </div>
</template>

<script setup>
import {getCurrentInstance, ref, onMounted, shallowRef, reactive, onBeforeUnmount, watch, computed} from "vue"
import {useRoute, useRouter} from "vue-router"
import "@wangeditor/editor/dist/css/style.css"
import { Editor, Toolbar } from "@wangeditor/editor-for-vue"
/**
 * minxin编辑器
 */
import editorMixins from "@mixins/hook/editor"
const {
  editorRef, editorHtml, editorConfig, editorToolbarConfig, handleEditorCreated,htmlAddImgUrl,htmlRemoveImgUrl
} = editorMixins()

const router = useRouter()
const route = useRoute()
// 文本类型如：1-用户协议 2-隐私协议 3-买家协议 4-商品详情 5=商品评价详情 6=提现协议 7=关于我们
const tabs = [
  {label:'用户协议',value:1},
  {label:'隐私协议',value:2},
  {label:'买家协议',value:3},
  {label:'提现协议',value:6},
  {label:'公司介绍',value:7},
];
const tabsActive = ref(1)
const { proxy } = getCurrentInstance()

const formRef = ref(null)
const formData = reactive({
  title:'',
  content:'',
  status:0
})
const formRule = reactive({
  title: [{ required: true, message: "请输入标题", trigger: "blur" }],
  content: [{ required: true, message: "请输入内容", trigger: "blur" }],
})
const resetDialogForm = () => {
  formRef.value.resetFields()
}
onMounted(() => {
  getDetail()
})
const loading = ref(false)
const detail = reactive({})
watch(tabsActive,newValue => {
  for (let key in detail){
    delete detail[key]
  }
  resetDialogForm()
  getDetail()
});
const getDetail = async () =>{
  loading.value = true
  await proxy.$axios
      .get(`/content/${tabsActive.value}/info`)
      .then((res) => {
        if (res.data.code == 200) {
          let result = res.data.data
          if(result){
            if(result.content){
              result.content = htmlAddImgUrl(result.content)
            }
            for (let key in result) {
              detail[key] = result[key]
            }
            for (let key in formData){
              formData[key] = result[key]
            }
          }
        } else {
          proxy.$message({message: res.data.msg, type: "error"})
        }
      }).catch((err) => {

      }).finally(()=>{
        loading.value = false
      })
}
// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value
  // insertFns.value = null
  if (editor == null) return
  editor.destroy()
})

const btnLoading = ref(false)
const submit = async () => {
  btnLoading.value = true
  let method = '';
  let url = '/content';
  let data = JSON.parse(JSON.stringify(formData));
  if(detail.sid){
    method = 'put';
    url += `/${detail.sid}`
  }else{
    method = 'post';
    url += `/create`
    data.type = tabsActive.value
  }

  data.content = htmlRemoveImgUrl(data.content)

  proxy.$axios[method](url,data)
      .then((res) => {
        btnLoading.value = false
        if (res.data.code == 200) {
          proxy.$message({message: "保存成功！", type: "success"})
        } else {
          proxy.$message({message: res.data.msg, type: "error"})
        }
      })
      .catch((err) => {
        btnLoading.value = false
      })

}
</script>


<style lang="less" scoped>
.editor-box {
  border: 1px solid #ccc;
  border-radius: 2px;
}

:deep(.el-date-editor) {
  width: 320px !important;

  .el-input__wrapper {
    width: 320px;
  }
}
</style>
